<template>
  <a-layout>
    <a-layout-header :style="headerStyle"><Header /></a-layout-header>

    <a-divider style="background-color: linear-gradient(90deg, #0000, #1e3726, #0000); margin: 0" />
    <a-layout-content :style="contentStyle"> <RouterView /> </a-layout-content>
    <a-layout-footer :style="footerStyle"> <Footer /> </a-layout-footer>
  </a-layout>
</template>
<script lang="ts" setup>
import { RouterView } from 'vue-router'

import type { CSSProperties } from 'vue'
import Header from './Header/index.vue'
import Footer from './Footer/index.vue'

const headerStyle: CSSProperties = {
  textAlign: 'center',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
}

const contentStyle: CSSProperties = {
  width: '80%',
  margin: '20px auto',
}

const footerStyle: CSSProperties = {
  height: 30,
  lineHeight: '30px',
  textAlign: 'center',
  borderTop: '1px solid #333',
}
</script>
